<script lang="ts" setup>
  import { defineEmits, ref, defineExpose } from "vue"

  interface Props {
    title?: string
    submitBtnText?: string
    cancelBtnText?: string
    showFooter?: boolean
    showSubmitBtn?: boolean
    width?: number,
    modal?: boolean
  }

  const props = withDefaults(defineProps<Props>(), {
    title: "",
    submitBtnText: "提交",
    cancelBtnText: "取消",
    showFooter: true, //是否显示按钮
    showSubmitBtn: true,
    modal: true,
    width: 500
  })
  const emit = defineEmits(['cancel','comfirm'])

  const show = ref(true)
  const loading = ref(false)
  const confirmDisabled = ref(false)

  const cancel = ()=>{
    emit('cancel')
  }
  const comfirm = ()=>{
    emit('comfirm')
  }
  const setLoading = (flag: boolean)=>{
    loading.value = flag
  }
  const setConfirmDisabled = (flag: boolean)=>{
    confirmDisabled.value = flag
  }

  defineExpose({
    setLoading,
    setConfirmDisabled
  })
</script>

<template>
  <el-dialog
    v-model="show"
    :title="props.title"
    @closed="cancel"
    :width="width"
    :modal="modal"
  >
    <div v-loading="loading">
      <slot></slot>
    </div>
    <template v-if="showFooter" #footer>
      <el-button @click="cancel">{{cancelBtnText}}</el-button>
      <el-button v-if="showSubmitBtn" type="primary" @click="comfirm" :disabled="confirmDisabled" :loading="loading">{{submitBtnText}}</el-button>
    </template>
  </el-dialog>
</template>

<style>
</style>
